<template>
  <div>
    <!-- 面包屑下的搜索框，购物车 -->
    <div class="header">
      <div class="headerBody" style="margin-top: 3px">
        <!-- Logo -->
        <div class="jaLogo" style="width: 200px">
          <img
            :src="logoImg"
            height="90%"
            width="90%"
            style="padding: 10px; float: left"
          />
        </div>
        <!-- 搜索框 -->
        <div>

        <div class="headerSelect">
          <input class="headerText" type="text" placeholder="请输入内容" />
          <button class="headerButton">
            <i class="el-icon-search" style="font-size: 20px; color: white"></i>
          </button>
        </div>
        <!-- 购物车 -->
        <div class="settingCar" @click="mybaycard">
          <i class="el-icon-shopping-cart-2" style="color: red"></i>
          <a href="" style="color: red">我的购物车</a>
        </div>
                  
        </div>
      </div>
    </div>
    <!-- 中间板块1 -->
    <div class="center1" style="width: 75%; margin: auto; height: 500px;">
      <!-- 中间板块1分类 -->
      <div class="centerClass" style="height: 500px; width: 300px; float: left;">
        <ul class="centerClassul">
          <li
            class="centerClassli"
            v-for="fenlei in fenleis"
            :key="fenlei.id"
            @mouseover="itemMouseover(fenlei)"
            @mouseout="itemMouseout"
          >
            <div
              v-for="(leibies, inde) in fenlei.leibie"
              :key="inde"
              style="float: left"
            >
              <!-- 悬浮框 -->
              <div id="focus_toolTip" class="special_focus_toolTip">
                
                <!-- 悬浮框左侧li -->
                <div style="width: 120px; float: left;margin-top:10px;margin-left:-10px">
                  <ul>
                    <li
                      v-for="(leftitem,ie) in bb"
                      :key="ie"
                      style="
                        font-weight: 600;
                        height: 40px;
                        font-size: 15px;
                        margin-top: 5px;
                        background-color:#999;
                        width: 80px;
                        text-align: right;
                        overflow: hidden;
                      "
                    >
                      <span style="float: left">
                        <a href="" style="font-weight: 600 !important;font-size: 15px !important;">
                          {{ leftitem.firstGrade }}
                        </a>
                      </span>
                      <span>
                        >
                      </span>
                    </li>
                  </ul> 
                </div>
                <!-- 悬浮框右侧li -->
                <div style="float: left;margin-top:10px;margin-left:-30px">
                  <ul>
                    <li style="height: 40px;colore:#909399;width:630px;overflow:hidden;margin-top:5px;"
                     v-for="(itemgrandson,ix) in bb" :key="ix">
                      
                      <a href="" v-for="(itemchildren,iex) in itemgrandson.second" :key="iex" style="padding-right:5px;">
                        {{itemchildren}}
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- 悬浮框样式 -->
                <div class="toolTopbody"></div>
              </div>
              <!--  -->
              <span style="padding: 0 2px; font-size: 12px" v-if="inde != 0"
                >/</span
              >
              <a href="">
                {{ leibies.firstGrade }}
              </a>
            </div>
          </li>
        </ul>
      </div>
      <!-- 中间板块1走马灯 -->
      <div class="block">
        <el-carousel trigger="click" style="height: 475px">
          <el-carousel-item
            v-for="footimg in footimgs"
            :key="footimg.id"
            style="height: 475px"
          >
            <img :src="footimg.idFoot" style="height: 475px; width: 800px" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <br>
    <!-- 为你推荐 -->
    <div style="width:100%;height:45px;">
      <div style="width:80%;margin:auto;">
        <h3  style="width:250px;margin:auto;height:45px;text-align:center;font-size:28px">
          <span class="foru">为你推荐</span> 
        </h3>
      </div>
      
    </div>
    <!-- 商品群 -->
    <div class="commoditys" style="width: 80%;margin:auto">
      <el-card
        style="
          width: 230px;
          height: 322px;
          margin-top: 10px;
          float: left;
          overflow: hidden;
          margin-right: 8px;
        "
        v-for="shangpin in shangpinqun"
        :key="shangpin.id"
      >
        <router-link :to="'/datail/' + shangpin.id">
          <div
            class="commodityimg"
            style="width: 190px; height: 200px; padding-left: 5px"
          >
            <img
              :src="shangpin.shangpinimg"
              style="width: 100%; height: 100%"
            />
          </div>
          <div
            class="commodityname"
            style="
            margin-top:10px
              width: 190px;
              height: 48px;
              overflow: hidden;
              text-align: left;
              font-size: 14px;
              line-height: 16px;
            "
          >
            {{ shangpin.commodityname }}
          </div>
          <div class="commodityprice" style="width: 190px; height: 20px">
            <strong>
              <span style="font-size: 14px; color: red"> ￥ </span>
              <span style="font-size: 20px; color: red">
                {{ shangpin.commodityprice }}
              </span>
            </strong>
          </div>
        </router-link>
      </el-card>
    </div>
  </div>
</template>

<script scoped>
import $ from "jquery";

export default {
  name: "HelloWorld",

  data () {
    return {
      aa: "",
      bb: [],
      toolTopbody: [],
      num: 0,
      logoImg: require("../imgs/logoo.jpg"),
      // 分类循环li
      fenleis: [
        {
          id: 1,
          leibie: [
            {
              firstGrade: "女装",
              second: [
                "黑丝", "白丝", "渔网", "包臀裙", "jk"
              ]

            },
            {
              firstGrade: "男装",
              second: [
                "背心", "短裤", "西装", "衬衫", "POLO衫",
              ]
            },
            {
              firstGrade: "童装",
              second: [
                "童鞋", "童裤", "童袜", "童内裤", "POLO衫"
              ]
            }

          ]
        },
        {
          id: 2,
          leibie: [
            {
              firstGrade: "手机",
              second: [
                "华为", "苹果", "小米", "OPPO", "vivo"
              ]

            },
            {
              firstGrade: "运行商",
              second: [
                "中国电信", "中国联通", "中国移动", "衬衫", "POLO衫"
              ]
            },
            {
              firstGrade: "笔记本",
              second: [
                "联想", "联想拯救者", "Thinkpad", "联想小新", "外星人","惠普"
              ]
            }

          ]
        },
        {
          id:3,
          leibie: [
            {
              firstGrade: "家具",
              second: [
                "书桌", "沙发", "床", "衣架", "鞋柜"
              ]

            },
            {
              firstGrade: "家居",
              second: [
                "中国电信", "中国联通", "中国移动", "衬衫", "POLO衫"
              ]
            },
            {
              firstGrade: "家装",
              second: [
                "联想", "联想拯救者", "Thinkpad", "联想小新", "外星人","惠普"
              ]
            }

          ]
        }
      ],
      // 商品详情小图
      footimgs: [
        { id: 0, idFoot: require("../imgs/001313usLig.jpg") },
        { id: 1, idFoot: require("../imgs/221054bEiV2.jpg") },
        { id: 2, idFoot: require("../imgs/221310f3crw.jpg") },
        { id: 3, idFoot: require("../imgs/2333296zENB.jpg") },
        { id: 4, idFoot: require("../imgs/231504xVYr7.jpg") },
      ],
      // 商品群
      shangpinqun: [
        {
          id: 1,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 2,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 3,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 4,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 5,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 6,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 7,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 8,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 9,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        },
      ],

    }
  }, methods: {
    Getaa () {
      console.log(1);
    }
    , mybaycard () {
      this.$router.push("/Cart")
    },
    itemMouseover: function (item) {
      console.log('移入',item);
      var focusTooltip = $("#focus_toolTip");
      focusTooltip.css("display", "block");
      this.aa = item.id
      var arr = item.leibie
      this.bb = arr
      console.log(arr);
    },

    itemMouseout: function () {
      console.log('移出');
      var focusTooltip = $("#focus_toolTip");
      focusTooltip.css("display", "none");
    },

  },
  //  mounted () {
  //   this.Getaa();
  // }
}
</script>

<style scoped>
button {
  cursor: pointer;
}

/* 头部 */
.header {
  background-color: #fff;

}
/* 头部身体 */
.headerBody {
  margin: auto;
  height: 180px;
  width: 1000px;
  display: flex;
  justify-content: space-between;
}

/* 搜索input */
.headerSelect {
  float: left;
  margin-top: 80px;
  margin-left: 10px;
  /* position: absolute; */
  left: 260px;
  top: 25px;
  width: 450px;
  height: 32px;
  border: 2px solid #e2231a;
  background: #fff;
}
.headerSelect .headerText {
  left: 0;
  padding: 2px 44px 2px 17px;
  width: 329px;
  height: 26px;
  border: 1px solid transparent;
  line-height: 26px;
  font-size: 14px;
  outline: none;
}
.headerSelect .headerButton {
  float: right;
  width: 58px;
  height: 32.5px;
  background-color: red;
  border: none;
  outline: none;
}
.headerButton:hover {
  background-color: #d33b33;
}

/* 头部购物车 */
.settingCar {
  float: left;
  font-size: 16px;
  width: 130px;
  height: 34px;
  background-color: #fff;
  text-align: center;
  line-height: 34px;
  margin-top: 80px;
  border: 1px solid #aeaeb3;
  margin-left: 15px;
}
.settingCar:hover {
  border: 1px solid #e2231a;
}

a {
  text-decoration: none;
  font-weight: 300 !important;
  color: rgb(0, 0, 0);
}
a:hover {
  color: red !important;
}
/* 第一板块分类ul */
.centerClassul {
  overflow: hidden;
  padding: 15px 0;
  height: 450px;
  background-color: #fefefe;
  color: #636363;
}
/* 第一板块分类li */
.centerClassli {
  height: 25px;
  font-size: 14px;
  color: #333;
  /* margin-left: 17px; */
  overflow: hidden;
  /* display: list-item; */
  text-align: -webkit-match-parent;
  padding-left: 17px;
}
.centerClassli:hover {
  background-color: #8b8a8a3b;
}

/* 走马灯 */

.block {
  float: left;
  width: 800px;
  margin-left: 10px;
  margin-top: 16px;
  height: 485px;
}
.el-carousel__container{
  height: 461px !important;
}
.el-carousel__item:nth-child(n) {
  background-color: #d3dce6;
}


/* 悬浮框 */
.special_focus_toolTip {
  z-index: 7;
  position: absolute;
  display: none;
  width: 807px;
  height: 480px;
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: white;
  border-width: 1px;
  border-color: #d4cbcba2;
  /* border-radius: 4px; */
  color: black;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 14px;
  /* font-family: 'Microsoft YaHei'; */
  /* line-height: 21px; */
  /* padding: 10px 10px; */
  margin-left: 284px;
  margin-top: -15px;
  border: 2px solid white;
}

/* 为你推荐 */

.foru:after, .foru:before{
  content: "";
  position: absolute;
  background-image: url(../imgs/sprite.png);
  width: 25px;
  height: 20px;
  margin-top: 10px;
}
.foru::before{
    margin-left: -35px;
}
.foru::after{
  margin-left: 10px;
}
/* .foru{
  position: absolute;
} */
</style>
